<template>
  <div class="app-container">
    <el-row class="toolbar">
      <el-col :span="24">
        <el-form :inline="true" :model="filters">
        <el-select v-model="filters.column" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
				<el-form-item>
					<el-input v-model="filters.keyword" placeholder="关键字"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="init">查询</el-button>
				</el-form-item>
			</el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table :data="data.list" element-loading-text="Loading"  fit highlight-current-row>
          <el-table-column label="设备名称" prop="name">
          </el-table-column>
          <el-table-column label="IMEI" width="160" prop="imei">
          </el-table-column>
          <el-table-column label="SIM"  width="160" prop="sim">
          </el-table-column>
          <el-table-column label="类型" prop="typeName">
          </el-table-column>
          <el-table-column  width="160" label="添加时间">
            <template slot-scope="scope">
              {{scope.row.time/1000|moment("YYYY-MM-DD HH:mm:ss")}}
            </template>
          </el-table-column>
          <el-table-column  width="160" label="最后更新时间">
            <template slot-scope="scope">
              {{scope.row.lastUpdate/1000|moment("YYYY-MM-DD HH:mm:ss")}}
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <el-tag size="small" :type="scope.row.status===1?'success':scope.row.status===0?'danger':'info'">{{scope.row.status===1?'在线':scope.row.status===0?'离线':'未激活'}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="当日/总里程(km)" width="130">
            <template slot-scope="scope">
            {{scope.row.todayTrip+"/"+scope.row.trip}}
            </template>
          </el-table-column>

          <el-table-column label="所属账号" prop="account">
            <template slot-scope="scope">
              <el-button type="primary" size="mini">{{scope.row.account}}</el-button>
            </template>

          </el-table-column>

        </el-table>
      </el-col>
    </el-row>
    <el-row class="toolbar">
      <el-col :span="24">
        <el-pagination
         layout="total, sizes, prev, pager, next"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
        :page-sizes="this.$store.state.common.pageSizes"
        :page-size="this.$store.state.common.pageSize"
        :total="data.total"
        style="float:right;">
        </el-pagination>
      </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getAllDevices } from '@/api/api'

export default {
  data() {
    return {
      page: 1,
      data:{},
      filters: {
          column:'',
					keyword:''
				},
      options: [{
         value: 'name',
         label: '设备名称'
       }, {
         value: 'imei',
         label: 'IMEI号'
       }, {
         value: 'sim',
         label: 'SIM号码'
       }, {
         value: 'account',
         label: '所属账号'
       }]
    }

  },
  created() {
    this.init();
  },
  methods: {
    init() {
      let para = {
        page: this.page,
        pageSize:this.$store.state.common.pageSize,
        column:this.filters.column,
        keyword:this.filters.keyword
      };
      getAllDevices(para).then(data => {
        this.data = data
      })
    },
    handleDelete(row){
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
         deleteUser(row.id).then(data => {
           this.$message({
             type: 'success',
             message: '删除成功!'
           });
           this.init()
         })
       });

    },

    handleSizeChange(val) {
      this.$store.dispatch('updatePageSize',val);
      this.init();

     },
     handleCurrentChange(val) {
       this.page = val;
       this.init();
     },

  }
}
</script>
<style>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}

</style>
